<template>
	<div class="keyboard" :style="{marginTop:20 +filling}">
		<Button v-for="(bt,k) in buttons" :key="bt.name" :name="bt.name" :color="bt.color" :size="bt.size" :top="bt.top"
			:left="bt.left" :label="bt.label" :arrow="bt.arrow" :position="bt.position" :active="keyboard[bt.name]"
			@mousedown="mousedown" @mouseup="mouseup" @mouseout="mouseout" @touchstart="touchstart"
			@touchend="touchend"></Button>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Button from "./Button.vue";
	import todo from "../control/todo/index.js";
	// 对于手机操作, 触发了touchstart, 将作出记录, 不再触发后面的mouse事件
	const touchEventCatch = {};

	// 在鼠标触发mousedown时, 移除元素时可以不触发mouseup, 这里做一个兼容, 以mouseout模拟mouseup
	const mouseDownEventCatch = {};

	export default {
		name: 'Keyboard',
		components: {
			Button
		},
		props: {
			filling: {
				type: Number,
				require: true,
			}
		},
		data() {
			return {};
		},
		computed: {
			...mapState({
				keyboard: (state) => {
					return state.keyboard;
				},
				buttons: (state) => {
					return state.buttons;
				},
			})
		},
		beforeCreate() {
			document.addEventListener('touchstart', (e) => {
				if (e.preventDefault) {
					e.preventDefault();
				}
			}, {
				capture: true,
				passive: false
			});

			// 解决issue: https://github.com/chvin/react-tetris/issues/24
			document.addEventListener('touchend', (e) => {
				if (e.preventDefault) {
					e.preventDefault();
				}
			}, true);

			// 阻止双指放大
			document.addEventListener('gesturestart', (e) => {
				if (e.preventDefault) {
					event.preventDefault();
				}
			});

			document.addEventListener('mousedown', (e) => {
				if (e.preventDefault) {
					e.preventDefault();
				}
			}, true);
		},
		methods: {
			exchangePosition() {
				this.$store.commit("buttons");
			},
			openHelper() {
				let oldval = this.$store.state.help;
				this.$store.commit("help", !oldval);
			},
			mousedown(key) {
				// console.log("mousedown", key)
				if (key === "exchange") {
					return this.exchangePosition();
				}
				if (key === "helper") {
					return this.openHelper();
				}
				if (touchEventCatch[key] === true) {
					return;
				}
				todo[key].down(this.$store);
				mouseDownEventCatch[key] = true;
			},
			mouseup(key) {
				// console.log("mouseup", key)
				if (key === "exchange") {
					return;
				}
				if (key === "helper") {
					return;
				}
				if (touchEventCatch[key] === true) {
					touchEventCatch[key] = false;
					return;
				}
				todo[key].up(this.$store);
				mouseDownEventCatch[key] = false;
			},
			mouseout(key) {
				if (key === "exchange") {
					return;
				}
				if (key === "helper") {
					return;
				}
				// console.log("mouseout", key)
				if (mouseDownEventCatch[key] === true) {
					todo[key].up(this.$store);
				}
			},
			touchstart(key) {
				// console.log("touchstart", key)
				if (key === "exchange") {
					return this.exchangePosition();
				}
				if (key === "helper") {
					return this.openHelper();
				}
				touchEventCatch[key] = true;
				todo[key].down(this.$store);
			},
			touchend(key) {
				// console.log("touchend", key)
				if (key === "exchange") {
					return;
				}
				if (key === "helper") {
					return;
				}
				todo[key].up(this.$store);
			}

		},

	}
</script>

<style scoped lang="less">
	.keyboard {
		width: 580px;
		height: 330px;
		margin: 20px auto 0;
		position: relative;
	}
</style>
